<template>
  <div class="content">
   <div class="banner" :style="{'height':bannerHeight+'px'}">
    <div class="header">
      <div class="name text-center">我的邀新奖励总额</div>
      <div class="name text-center"><span class="total">{{totalMoney}}</span>元</div>
      <div class="name text-center">{{spreadStatus}}</div>
    </div>
  </div>
  <div class="detailed" style="z-index: 0;">
    <div v-if="!hasData" class="noContent">
      <p>您还没有邀新奖励,快去推荐好友吧~</p>
      <button class="button" @click="goToExtend()">去邀新</button>
    </div>
    <div v-else class="detailed-content">
      <p class="text-title">邀新明细</p>
      <div class="list" v-for="(item, index) in extendList" :key='index'>
        <div class="text-md text-normal" style="flex: 6;text-overflow: ellipsis;overflow: hidden; white-space: normal;">
          用户{{item.userName}}注册成功
           <div class="text-sm text-gray">{{item.createdAt | filterDate}}</div>
        </div>
        <div class="fr" style="flex: 4;align-items: center;text-align: right;">
          <div class="moeny">+<span class="text-md">
          <span>{{spreadBasic}}</span>
          </span>元</div>
          <div class="text-sm text-gray">{{item.status}}</div>
        </div>
      </div>
    </div>
  </div>
  <bottomMenu :menuType="menuType"></bottomMenu>
  </div>
</template>

<script>
import {getSpread} from '@/controller'
import {getCodeRule} from '@/controller'
import bottomMenu from './bottomMenu.vue'
export default {
  name: 'extendDetail',
  data () {
    return {
      bannerHeight: window.innerWidth / (25 / 12),
      msg: 'extendDetail ',
      hasData:true,
      totalMoney:0.00,
      spreadStatus:'未结算',
      menuType:3,
      extendList:[],
      // rewardList:[],
      spreadBasic:0.00
    }
  },
  components: {
    'bottomMenu': bottomMenu
  },
  filters: {
    filterDate(date) {
      var date = new Date(date);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + ' ';
      return Y + M + D;
    }
  },
  methods:{
      async init() {
        const result = await getSpread();
        if (result.code == 0) {
          if(!result.data.list || result.data.list.length == 0) {
            this.hasData = false
          } else {
            console.log(result.data.list);
            this.hasData = true;
            this.extendList = result.data.list;
            this.totalMoney = result.data.sum;
            if(result.data.status===0){
              this.spreadStatus='未结算';
            }else if(result.data.status===1){
              this.spreadStatus='已结算';
            }
          }
        }else{
          this.hasData = false;
        }
      },
      goToExtend(){
        this.$router.push({
          path:`/extend`
        })
      },
      getRecmdMoney(){
        getCodeRule({}).then((res) => {
          if (res.code === 0) {
            this.spreadBasic=res.data.rule.spreadBasic;    
          } else {
            this.$toast.center('鉴权失败');
          }
        })   
      },
  },
  mounted() {
      this.init();
      this.getRecmdMoney();
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content{
    position: fixed;
    background: #f5f5f5;
    height: 100%;
    width: 100%;
    overflow: scroll;
}
.banner{
    background: url(/static/wechat/images/centerBg@2x.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
}
.detailed .list {
    display: flex;
}
.text-sm{
  font-size: 12px;
}
</style>
